<template>
  <el-dialog top="10vh" :visible.sync="dialogVisible" width="1200px" append-to-body>
    <el-card class="box-card" style="margin-top: 0px;">
      <div slot="header" class="clearfix">
        <span>审批详情</span>
      </div>
      <el-container>
        <el-main style="height: 20vh">
          <el-form ref="form" label-width="120px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="审批分类：">
                  {{ sysExamineCnf.examineMc }}
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="事项名称：">
                  {{ SysExamineMain.itemName }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="申请部门：">
                  {{ SysExamineMain.applyDeptName }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="申请人员：">
                  {{ SysExamineMain.applyUserName }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="审批状态：">
                  {{ SysExamineMain.examineZt }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="SysExamineMain.detailsId">
              <el-col :span="8">
                <el-form-item label="当前环节：">
                  {{ SysExamineMain.detailsMc }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="当前部门：">
                  {{ SysExamineMain.currentDeptName }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="当前办理：">
                  {{ SysExamineMain.currentUserName }}
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-main>
      </el-container>
    </el-card>
    <el-row :gutter="40">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>审批流程</span>
          </div>
          <el-container>
            <el-main style="height: 25vh">
              <el-table
                :data="sysExamineDetailsList"
                highlight-current-row
                style="width: 100%">
                <el-table-column
                  type="index"
                  header-align="center"
                  align="center"
                  width="50">
                </el-table-column>
                <el-table-column
                  property="detailsMc"
                  label="审批环节"
                  header-align="center"
                  align="center"
                  width="120">
                </el-table-column>
                <el-table-column
                  property="examineDeptName"
                  label="审批部门"
                  header-align="center"
                  align="center">
                </el-table-column>
                <el-table-column
                  property="examineUserName"
                  label="审批人员"
                  header-align="center"
                  align="center"
                  width="120">
                </el-table-column>
              </el-table>
            </el-main>
          </el-container>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>审批日志</span>
          </div>
          <el-container>
            <el-main style="height: 25vh">
              <el-timeline :reverse="true">
                <el-timeline-item v-for="(activity, index) in sysExamineStreamList" :key="index"
                                  :timestamp="activity.createTime" placement="top">
                  <div>
                    <h4>{{ activity.streamMc }} {{ activity.operationUserName }}</h4>
                    <p v-if="activity.endTime">批注：{{ activity.streamPz }} 于 {{ activity.endTime }}</p>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </el-main>
          </el-container>
        </el-card>
      </el-col>
    </el-row>
    <!--    <span slot="footer" class="dialog-footer">-->
    <!--      <el-button @click="dialogVisible = false">关闭</el-button>-->
    <!--    </span>-->
  </el-dialog>
</template>

<script>
import {getInfo} from '@/api/admin/sysexaminemain'

export default {
  name: "info",
  data() {
    return {
      dialogVisible: false,
      SysExamineMain: {},
      sysExamineStreamList: [],
      sysExamineCnf: {},
      sysExamineDetailsList: []
    };
  },
  methods: {
    init(id) {
      getInfo(id).then(res => {
        this.SysExamineMain = res.data.data.SysExamineMain;
        this.sysExamineStreamList = res.data.data.sysExamineStreamList;
        this.sysExamineCnf = res.data.data.sysExamineCnf;
        this.sysExamineDetailsList = res.data.data.sysExamineDetailsList;
        this.dialogVisible = true;
      })
    }
  }
}
</script>

<style scoped>

</style>
